<template>
  <transition name="move" @after-leave="onLeave">
    <div class="food" v-show="visible">
      <!-- 内容比较多，会有滚动效果 -->
      <cube-scroll ref="scroll">
        <div class="food-content">
          <div class="img-header">
            <!-- 大图 -->
            <img :src="food.image" />
            <!-- 返回按钮 -->
            <div class="back" @click="hide">
              <!-- 使用字体 -->
              <i class="icon-arrow_lift"></i>
            </div>
          </div>
          <div class="content">
            <!-- 商品名称 -->
            <h1 class="title">{{ food.name }}</h1>
            <!-- 销售情况 -->
            <div class="detail">
              <span class="sell-count">月售：{{ food.sellCount }}</span>
              <span class="rating">好评率：{{ food.rating }}%</span>
            </div>
            <!-- 价格 -->
            <div class="price">
              <span class="now">￥{{ food.price }}</span>
              <span class="old" v-show="food.oldPrice"
                >￥{{ food.oldPrice }}</span
              >
            </div>
            <!-- 计数组件 -->
            <div class="cart-control-wrapper">
              <cart-control :food="food" @add="addFood"></cart-control>
            </div>
            <!-- 加入购物车 -->
            <transition name="fade">
              <div class="buy" v-show="!food.count" @click.stop="addFirst">
                <!-- 阻止冒泡 -->
                加入购物车
              </div>
            </transition>
          </div>
          <!-- 分割线 -->
          <split />
          <!-- 商品简介 -->
          <div class="info" v-show="food.info">
            <h2 class="title">商品信息</h2>
            <p class="text">{{ food.info }}</p>
          </div>
          <!-- 分割线 -->
          <split />
        </div>
      </cube-scroll>
    </div>
  </transition>
</template>

<script>
import popupMixin from "common/mixins/popup";
import split from "../split/split";
import CartControl from "../cart-control/cart-control.vue";

export default {
  mixins: [popupMixin],
  name: "food",
  props: {
    food: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  created() {
    // 监听 事件
    this.$on("show", () => {
      this.$nextTick(() => {
        this.$refs.scroll.refresh();
      });
    });
  },
  components: {
    split,
    CartControl
  },
  methods: {
    onLeave() {
      this.$emit("leave");
    },
    // 添加购物车
    addFirst(event) {
      // this.food.count = 1;
      // 数据动态变化
      this.$set(this.food, "count", 1);
      this.$emit("add", event.target);
    },
    // 为了实现小球下落效果，添加商品数量
    addFood(target) {
      this.$emit("add", target);
    }
  }
};
</script>

<style lang="stylus" scoped>
@import "~common/stylus/variable"
@import "~common/stylus/mixin"

.food
  position fixed
  left: 0;
  top: 0;
  bottom:48px;
  z-index: 30;
  width: 100%;
  background-color: $color-white
  // 动画效果
  &.move-enter-active,&.move-leave-active
    transition all 0.3s linear
  &.move-enter,&.move-leave-active
    transform translate3d(100%, 0 ,0)
  // 头部图片
  .img-header
    position relative
    width: 100%;
    height: 0;
    padding-top: 100%;
    img
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    // 返回按钮
    .back
      position: absolute;
      top: 10px;
      left: 0px;
      background-color: $color-bg-sss;
      border-radius 50%
      .icon-arrow_lift
        display: block;
        padding: 10px;
        font-size: $fontsize-large;
        color: white;
  // 主要内容部分
  .content
    position: relative
    padding: 18px
    // 标题
    .title
      line-height: 14px
      margin-bottom: 8px
      font-size: $fontsize-medium
      font-weight: 700
      color: $color-dark-grey
    // 详情 销售情况
    .detail
      margin-bottom: 18px
      line-height: 10px
      height: 10px
      .sell-count, .rating
        font-size: $fontsize-small-s
        color: $color-light-grey
      .sell-count
        margin-right: 12px
    // 价格
    .price
      line-height: 24px
      font-weight: 700
      .now
        margin-right: 8px
        font-size: 14px
        color: $color-red
      .old
        text-decoration: line-through
        font-size: $fontsize-small-s
        color: $color-light-grey
    // 计数组件
    .cart-control-wrapper
      position: absolute
      right: 12px
      bottom: 12px
    .buy
      position: absolute
      right: 18px
      bottom: 18px
      z-index: 10
      height: 24px
      line-height: 24px
      padding: 0 12px
      box-sizing: border-box
      border-radius: 12px
      font-size: $fontsize-small-s
      color: $color-white
      background: $color-blue
      opacity: 1
      &.fade-enter-active, &.fade-leave-active
        transition: all 0.3s
      &.fade-enter, &.fade-leave-active
        opacity: 0
        z-index: -1
  .info
    padding: 18px
    .title
      line-height: 14px
      margin-bottom: 6px
      font-size: $fontsize-medium
      color: $color-dark-grey
    .text
      line-height: 24px
      padding: 0 8px
      font-size: $fontsize-small
      color: $color-grey
</style>
